<template>
  <div>
    <!-- 头部介绍区 -->
    <el-card class="introduce">
      <el-row>
        <el-col :span="4" class="avatar"
          ><el-avatar
            :size="100"
            :src="avatarUrl"
            icon="el-icon-user-solid"
          ></el-avatar
        ></el-col>
        <el-col :span="20" class="message">
          <span>{{ proxy.$storage.getItem('userInfo').userName }}</span>
          <span
            >创建于
            {{ proxy.$storage.getItem('userInfo').userCreateTime }}</span
          >
          <div v-show="tags.length > 0">
            <span>标签：</span>
            <el-tag v-for="(item, index) in tags" :key="index">{{
              item
            }}</el-tag>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 基本信息区 -->
    <el-card class="information">
      <span class="txt">基本信息</span>
      <el-form
        :model="informationForm"
        label-width="80px"
        label-position="left"
      >
        <el-form-item label="用户ID">
          <span>{{ informationForm.userId }}</span>
        </el-form-item>
        <el-form-item label="用户昵称">
          <span>{{ informationForm.userName }}</span>
        </el-form-item>
        <el-form-item label="用户手机">
          <span>{{ encryptTel }}</span>
        </el-form-item>
        <el-form-item label="用户邮箱">
          <span>{{ informationForm.userEmail }}</span>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, ComponentInternalInstance, onMounted, computed } from 'vue';

const { appContext } = getCurrentInstance() as ComponentInternalInstance;
const proxy = appContext.config.globalProperties;

// 头像图片地址
const avatarUrl = ref('https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png');
// 基本信息数据
const informationForm = ref(proxy.$storage.getItem('userInfo') || '');
// 标签
const tags = ref([]);

onMounted(() => {
  getUserInfTag();
});

const encryptTel = computed(() => {
  let reg = /^(\d{3})\d{4}(\d{4})$/;
  if (informationForm.value.userTel) {
    return informationForm.value.userTel.replace(reg, '$1****$2');
  }
  return null;
});

// 获取用户标签信息
function getUserInfTag() {
  proxy.$request.userStudyAnalysis
    .getUserInfTag({
      userId: proxy.$storage.getItem('userInfo').userId,
    })
    .then((res: any) => {
      if (!res.data) return;
      tags.value = res.data.filter((item: any) => item !== '');
    });
};
</script>

<style lang="less" scoped>
.introduce {
  .avatar {
    text-align: center;

    .el-avatar {
      font-size: 50px;
    }
  }

  .message {
    text-align: left;
    span {
      display: block;
    }

    span:nth-child(1) {
      font-size: 28px;
    }

    span:nth-child(2) {
      margin-top: 5px;
    }

    div:nth-child(3) {
      margin: 10px 0;

      span {
        font-size: 16px;
        display: inline-block;
      }

      .el-tag {
        margin: 0 5px;
        font-size: 16px;
        display: inline-block;
      }
    }
  }
}

.information {
  text-align: left;
  /deep/ .el-card__body {
    padding: 0;
  }

  margin-top: 20px;

  .txt {
    display: block;
    padding: 0 20px;
    font-size: 18px;
    font-weight: 600;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #eee;
  }

  .el-form {
    /deep/ .el-form-item__label {
      font-size: 16px;
      margin: 0 30px 0 50px;
      text-align-last: justify;
    }

    .el-form-item {
      margin-top: 20px;

      span {
        font-size: 16px;
      }
    }
  }
}
</style>
